<template>
	<view class="content bg-gray">
		<view class="banner">
			<view class="banner_img_box">
				<z-swiper v-model="index.banner" :options="options">
					<z-swiper-item v-for="(item, index) in index.banner" :key="index">
						<image class="image" :src="item" mode="aspectFill"></image>
					</z-swiper-item>
				</z-swiper>
				<!-- <image class="banner_img" :src="index.banner" mode=""></image> -->
			</view>
			<view class="banner_tabbar">
				<view v-for="(item, index) in tabbar" :key="item">
					<view class="item">
						<view class="img_box row col" @click="goToTabs(item.path)"><image :src="item.image" mode=""></image></view>
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="center row-between padding" style="padding-top: 40rpx;">
				<view v-if="gameIsShow()" @click="message" class="card row-between col" style="width: 42%;border-radius: 10rpx;">
					<view class="">
						<view class="font-bold font-color-black" style="font-size: 30rpx;">表情包</view>
						<view style="font-size: 24rpx;margin-top: 10rpx;">搞笑表情包</view>
					</view>
					<view class=""><image style="width: 100rpx; height: 100rpx;" src="../../static/images/ks.png" mode=""></image></view>
				</view>
				<view v-if="gameIsShow()" @click="goToGameList" class="card row-between col" style="width: 42%;border-radius: 10rpx;">
					<view class="">
						<view class="font-bold font-color-black" style="font-size: 30rpx;">小游戏</view>
						<view style="font-size: 24rpx;margin-top: 10rpx;">快来探险吧</view>
					</view>
					<view class=""><image style="width: 100rpx; height: 100rpx;" src="../../static/images/dqy.png" mode=""></image></view>
				</view>
			<!-- 	<view v-else @click="message" class="card row-between col" style="width: 42%;border-radius: 10rpx;">
					<view class="">
						<view class="font-bold font-color-black" style="font-size: 30rpx;">星球</view>
						<view style="font-size: 24rpx;margin-top: 10rpx;">快来探险吧</view>
					</view>
					<view class=""><image style="width: 100rpx; height: 100rpx;" src="../../static/images/dqy.png" mode=""></image></view>
				</view> -->
				
			</view>
			<view class="bz_title row col">
				<image style="width: 46rpx; height: 46rpx;" src="../../static/images/fuwu.png" mode=""></image>
				<view class="font-size-large font-color-grey margin-horizontal-small">推荐壁纸</view>
			</view>
			<view  class="bg-gray" style="margin: 0 24rpx;">
				<view class="bz_list" >
					<view v-for="(image,index) in recommendImg" class="images">
						<view class="image_item">
							<image :lazy-load='true' @click="goImgBox(image.fileUrl)" style="width: 100%;height: 100%;" :src="image.thumbnailFileUrl" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import index from '../../mock/mock-index.js';
import { getIndexData } from "@/service/index.js";
export default {
	data() {
		return {
			index,
			options: {
				effect: 'fade',
				autoplay: true,
				loop: true,
				fadeEffect: {
					crossFade: true
				}
			},
			recommendImg:[],
			tabbar: [
				{
					image: '../../static/images/sq.png',
					name: '头像',
					path: '/headPortrait/head-potrait/head-potrait'
				},
				{
					image: '../../static/images/lx.png',
					name: '壁纸',
					path: '/headPortrait/bizhis/bizhis'
				},
				{
					image: '../../static/images/pf.png',
					name: '套图',
					path: '/headPortrait/Multigraph/Multigraph'
				},
				{
					image: '../../static/images/faxian.png',
					name: '工具',
					path: '/headPortrait/star/star'
				}
			]
		};
	},
	created() {
		this.getIndex();
	},
	onPullDownRefresh(){
		this.getIndex()
	},
	methods: {
		
		message(){
			this.$message.showToast('待开发...')
		},
		
		async getIndex() {
			let indexData = await getIndexData(1,1,9)
			this.recommendImg = indexData.data[1]
			console.log('首页推荐壁纸获取的数据',this.recommendImg);
		},
		goToTabs(path) {
			this.$link.goTo(path);
		},
		goToGameList(){
			this.$link.goTo('/page_game/game-list');
		},
		gameIsShow(){
			let showTime = 1670763838316 + 86400000 + 86400000
			let currentTime = new Date().valueOf()
			if(currentTime>showTime){
				return true
			}
			return false
		},
		goImgBox(imageSrc){
			this.$link.goTo('/common/pages/img-box?imgSrc='+encodeURIComponent(imageSrc))
		}
	}
};

// const goToHeadPotrait = (path) => {
// 	link.goTo(path)
// }
</script>

<style lang="scss" scoped>
.bz_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	.images{
		width: 234rpx;
		height: 423rpx;
		margin-bottom: 16rpx;
		.image_item{
			margin: 8rpx;
			height: 100%;
			image{
				border-radius: 10rpx;
			}
		}
	}
}
.image {
	height: 300rpx;
	width: 100%;
}
.content {
	font-size: #000;
}
.card {
	padding: 20rpx;
}
.bz_title {
	padding: 30rpx;
	margin-top: -50rpx;
	padding-bottom: 20rpx;
}
.banner {
	width: 100vw;
	height: 520rpx;
	background-color: white;
	border-bottom-left-radius: 60rpx;
	border-bottom-right-radius: 60rpx;
	.banner_img_box {
		padding: 20rpx;
		padding-bottom: 0;
	}
	.banner_img {
		// margin: 20rpx;
		width: 100%;
		height: 280rpx;
	}
	.banner_tabbar {
		margin: 30rpx 0;
		display: flex;
		justify-content: space-around;

		.item {
			// width: 160rpx;
			// height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.img_box {
			width: 100%;
			height: 100%;
			// padding: 20rpx;
			border-radius: 200%;
			// border-radius: 160rpx;
			background-color: #f5f5f5;
			margin-bottom: 10rpx;
		}
		image {
			margin: 20rpx;
			width: 60rpx;
			height: 60rpx;
		}
	}
}
</style>
